<p>This is an issue when using <code>.filter()</code> followed by array access methods like <code>[0]</code>, <code>.at(-1)</code>,
<code>.shift()</code>, <code>.pop()</code>, or destructuring to get a single element from an array.</p>
<h2>Why is this an issue?</h2>
<p>Using <code>.filter()</code> to find a single element is inefficient and unclear in intent.</p>
<p>The <code>.filter()</code> method processes the entire array and creates a new array containing all matching elements. When you only need the first
or last matching element, this approach has several problems:</p>
<ul>
  <li> <strong>Performance overhead</strong>: <code>.filter()</code> continues processing even after finding matches, while <code>.find()</code> stops
  immediately upon finding the first match </li>
  <li> <strong>Memory waste</strong>: An intermediate array is created unnecessarily </li>
  <li> <strong>Unclear intent</strong>: The code suggests you want multiple elements when you actually want just one </li>
</ul>
<p>The <code>.find()</code> method is specifically designed for finding the first matching element, and <code>.findLast()</code> for finding the last
matching element. Both methods:</p>
<ul>
  <li> Stop execution as soon as they find a match (or reach the end) </li>
  <li> Return the element directly, not wrapped in an array </li>
  <li> Make the code’s intent crystal clear </li>
</ul>
<p>This pattern is especially problematic in performance-critical code or when working with large arrays, where the unnecessary processing can become
a bottleneck.</p>
<h3>What is the potential impact?</h3>
<p>Using <code>.filter()</code> instead of <code>.find()</code> or <code>.findLast()</code> can lead to unnecessary performance overhead, especially
with large arrays. The code also becomes less readable and maintainable, as the intent to find a single element is obscured by the filtering
operation.</p>
<h3>How to fix?</h3>
<p>Replace <code>.filter()</code> followed by <code>[0]</code> or <code>.shift()</code> with <code>.find()</code> to get the first matching element
more efficiently.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const item = array.filter(x =&gt; isUnicorn(x))[0]; // Noncompliant
const item2 = array.filter(x =&gt; isUnicorn(x)).shift(); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const item = array.find(x =&gt; isUnicorn(x));
const item2 = array.find(x =&gt; isUnicorn(x));
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-array-find.md">prefer-array-find</a> </li>
  <li> MDN - Array.prototype.find() - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">Official
  documentation for the Array.find() method</a> </li>
  <li> MDN - Array.prototype.findLast() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast">Official documentation for the
  Array.findLast() method</a> </li>
  <li> MDN - Array.prototype.filter() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">Official documentation for the Array.filter()
  method</a> </li>
</ul>
